<%@page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />
<c:set var="menu" value="repository" scope="request" />

<html>
<head>
<title>Repositories</title>
<script type="text/javascript">
   $(document).ready(function () {
      var source = {
         datatype: "json",
         datafields: [
            { name: 'name' },
            { name: 'description' },
            { name: 'createdDate' },
            { name: 'createdBy' }
         ],
         id: 'id',
         url: "<c:url value='/admin/repository/search' />",
         async: false
      };

      var dataAdapter = new $.jqx.dataAdapter(source);

      $("#repositoryGrid").jqxGrid({
         width: 870,
         source: dataAdapter,
         theme: getTheme(),
         columnsresize: true,
         pageable: true,
         autoheight: true,
         sortable: true,
         altrows: true,
         columns: [
            { text: 'Name', datafield: 'name', width: 180 },
            { text: 'Description', datafield: 'description', width: 370 },
            { text: 'Created Date', datafield: 'createdDate', width: 200 },
            { text: 'Created By', datafield: 'createdBy', width: 120 }
         ]
      });
   });

   function openDiaglog(title) {
      $("#repositoryDialog").dialog({
         title: title,
         resizable: false,
         draggable: false,
         modal: true,
         width: 300,
         buttons: {
            "Save": function() {
               saveRepository();
   			},
   			Cancel: function() {
   				$(this).dialog("close");
   			}
         }
      });
   }

   function closeDiaglog() {
      $('#repositoryDialog').dialog('close');
   }
   
   function openDeleteDiaglog() {
      $("#dialog-confirm").dialog({
         resizable: false,
         draggable: false,
         modal: true,
         width: 300,
         buttons: {
            "Delete all items": function() {
               deleteRepository();
   			},
   			Cancel: function() {
   				$(this).dialog("close");
   			}
         }
      });
   }

   function addRepository() {
      $("#repositoryDialog").load("<c:url value='/ajax/admin/repository' />");
      openDiaglog("Add Repository");
   }

   function editRepository() {
      var selectedIndex = $("#repositoryGrid").jqxGrid('getselectedrowindex');
      if(selectedIndex < 0) {
         alert("Please select a row.");
         return;
      }

      var id = $("#repositoryGrid").jqxGrid('getrowid', selectedIndex);
      $("#repositoryDialog").load("<c:url value='/ajax/admin/repository' />?id=" + id);
      openDiaglog("Edit Repository");
   }

   function saveRepository() {
      $.ajax({
         url : "<c:url value='/ajax/admin/repository/save' />",
         type : "POST",
         data: $('#folderForm').serialize(),
         dataType : "html",
         success : function(data) {
            if($(data).first().attr("id") == "error") {
        	   $("#repositoryDialog").html(data);
            } else {
               closeDiaglog();
               $("#repositoryGrid").jqxGrid("source").dataBind();
            }
         }
      });
   }

   function clearForm() {}

   function temp() {}

   function deleteRepository() {
      $('#dialog-confirm').dialog('close');
      
      var selectedIndex = $("#repositoryGrid").jqxGrid('getselectedrowindex');
      if(selectedIndex < 0) {
         alert("Please select a row.");
         return;
      }

      var id = $("#repositoryGrid").jqxGrid('getrowid', selectedIndex);
      $.ajax({
         url : "<c:url value='/ajax/admin/repository/delete' />",
         type : "POST",
         data : { id: id },
         dataType : "html",
         success : function(data) {
            if(data == "error") {
        	   alert('error!!');
        	   return;
            }

            $("#repositoryGrid").jqxGrid("source").dataBind();
         },
         error : function(){
            alert('-1');
         }
      });
   }
</script>
</head>

<body>
   <div class="cubeTitleWrapper">
      <span class="cube_title">Repositories</span>
   </div>

   <div class="cube">
      <div>
         <div class="contentwrapper">
            <div class="contentcolumn">
               <div class="innertube">
                  <h2 class="userDefinedBg curved">Repositories</h2>
                  <div class="contentBlock">
                     <div id='userWidget'><div id="repositoryGrid">No results found</div></div>
                  </div>
                  <div class="contentBlock_bottom"><span class="right_end"><span></span></span></div>
               </div>
            </div>
         </div>

         <div class="rightcolumn">
            <div class="innertube">
               <h2 class="userDefinedBg"><span class="right_end"><span class="start">Tools</span></span></h2>
               <div class="contentBlock">
                  <ul class="toolbox userDefinedColor">
                     <li class="userDefinedBg"><a class="add_link add-sow" href="javascript:addRepository()">Add New Repository</a></li>
                     <li class="userDefinedBg"><a class="add_link edit" href="javascript:editRepository()">Edit Selected Repository</a></li>
                     <li class="delete"><a class="add_link delete" href="javascript:openDeleteDiaglog()">Delete Selected Repository(s)</a></li>
                  </ul>
               </div>
               <div class="contentBlock_bottom"><span class="right_end"><span></span></span></div>
            </div>
         </div>
      </div>
   </div>
   
   <div id="repositoryDialog" title="Add Repository" style="display: none;"></div>
   <div id="dialog-confirm" title="Delete selected repository(s)?" style="display: none;">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These repositories will be permanently deleted and cannot be recovered. Are you sure?</p>
   </div>
</body>
</html>